<template>
	<div id="add">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
			<el-row :gutter="130">
				<el-col :span="100">
					<el-tag>我要添加</el-tag>
				</el-col>
			</el-row>
			<el-form-item prop="word">
				<el-input class="file" type="text" v-model="ruleForm.word" placeholder="输入单词"></el-input>
			</el-form-item>	
			<el-form-item prop="file">
				<el-input class="file" type="textarea" v-model="ruleForm.file" placeholder="选择编辑文本"></el-input>
			</el-form-item>
			<!-- <el-form-item>
				<el-row>
					<el-col span="4">
						<font size="4" class="firstcol">路径：</font>
					</el-col>
					<el-col span="14">
						<el-input class="secondcol" type="text" placeholder="文件路径"></el-input>
					</el-col>
					<el-col span="5">
						<el-button id="button3">上传文件</el-button>
					</el-col>
				</el-row>
			</el-form-item> -->
			<!-- <el-form-item prop="subject">
				<el-row>
					<el-col span="4" class="firstcol"><font size="4">所属学科：</font></el-col>
					<el-col span="30">
						<el-radio-group v-model="ruleForm.subject" @change="changeHandler">
							<el-radio label="1"><font size="4">一级学科</font></el-radio>
							<el-radio label="2"><font size="4">二级学科</font></el-radio>
							<el-radio label="3"><font size="4">三级学科</font></el-radio>
						</el-radio-group>
					</el-col>
				</el-row>
			</el-form-item> -->
			<el-form-item prop="firstSubject">
				<el-row>
					<el-col :span="6" class="firstcol"><font size="4">所属一级学科：</font></el-col>
					<el-col :span="30">
						<el-select v-model="ruleForm.firstSubject" @change="changeFirstSub" placeholder="请选择对应一级学科">
							<el-option 
							v-for="item in FirstSubList"
							:key="item.label"
							:label="item.label"
							:value="item.label">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item prop="secondSubject">
				<el-row>
					<el-col :span="6" class="firstcol"><font size="4">所属二级学科：</font></el-col>
					<el-col :span="30">
						<el-select v-model="ruleForm.secondSubject" placeholder="请选择对应二级学科">
							<el-option 
							v-for="item in SecondSubList"
							:key="item.label"
							:label="item.label"
							:value="item.label">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item prop="reference">
				<el-row>
					<el-col :span="6">
						<font size="4" class="firstcol">参考文献：</font>
					</el-col>
					<el-col :span="30">
						<el-input class="reference2" type="text" v-model="ruleForm.reference" placeholder="输入参考文献"></el-input>
					</el-col>
				</el-row>		
			</el-form-item>
			<el-form-item>
				<!-- <el-button id="submit" type="primary" @click="submitForm('submitForm')">提交</el-button> -->
				<el-button id="submit" type="primary" v-on:click="submit">提交</el-button>
			</el-form-item>
		</el-form>	
	</div>	
</template>
<script>

import {setCookie,getCookie} from '../js/cookieUtil'
import constant from '../static/constant.json'
export default {
	name: 'add',
	data(){
		return{
			ruleForm:{
				username:'',
				word:'',
				file:'',
				// subject:'',
				// major:'',
				firstSubject:'',
				secondSubject:'',
				reference:''
			},
			responseResult:[],
			optionList:'',
			FirstSubList: constant.FirstSubList,
			SecondSubList:'',
			SecondSubLists: constant.SecondSubList
		}
	},
	/* 约束规则
	rules:{
		word:[
			{min: 1, max: 20, message: '长度在1到20个字符之间', trigger: 'blur'}
		],
	}, */
	methods:{
		changeFirstSub(value){
			this.ruleForm.secondSubject=''
			this.SecondSubList=this.SecondSubLists[value]
		},
		changeHandler(value){
			// this.$message('改变之后的值是:' + value);
			this.optionList=''
			this.ruleForm.major=''
			if(value==1){
				this.optionList=this.optList1
			}
			if(value==2){
				this.optionList=this.optList2
			}
			if(value==3){
				this.optionList=this.optList3
			}
		},
		submit(){
			if(getCookie('islogin')!='--'){
				if(this.ruleForm.word==''){
					this.$message('请输入想要添加的单词')
					return false
				}
				if(this.ruleForm.file==''){
					this.$message('请输入编辑的文本')
					return false
				}
				if(this.ruleForm.firstSubject==''){
					this.$message('请选择对应的一级学科')
					return false
				}
				if(this.ruleForm.secondSubject==''){
					this.$message('请选择对应的二级学科')
					return false
				}
				if(this.ruleForm.reference==''){
					this.$message('请输入参考文献')
					return false
				}
				this.$axios
				.post('api/ruleForm',{
				// username:getCookie('username'), 
				word:this.ruleForm.word,
				file:this.ruleForm.file,
				// subject:this.ruleForm.subject,
				FirstSubject:this.ruleForm.firstSubject,
				SecondSubject:this.ruleForm.secondSubject,
				reference:this.ruleForm.reference
				})
				.then(successRespond => {
					if(successRespond.data.code===200){
						this.$router.replace({path: '/explain'})
					}
				})
				.catch(failRespond => {
				})
			}else{
				alert("弹出登陆dialog")
			}
			
		} 
	},
	watch:{
		'$route.query.inputWord'(newVal,oldVal) {
			console.log("ADD  Watch")
			console.log(newVal)
			console.log(oldVal)
			this.inputWord = newVal 
		}
	},
}
 

</script>
<style scoped>
/* #add { */
	#add{
		
	}
	.el-form {
		width: 560px;
		border: 1px solid black;
		text-align: left;
		background: gainsboro;
		@media screen and(max-width: 500px) {
			
			width: 100%;
			
		}
	} 
	.el-row{
		margin-top: 20px;
	}
	.el-tag{
		color: black;font-size: 28px;margin-left: 20px;
		height: 36px;
		line-height: 36px;
	}
	.user{
		font-size: 20px;
	}
	.file{
		/* border: 1px solid black; */
		width: 500px;
		margin-left: 30px;
		@media screen and(max-width: 500px) {
			
			width: 100%;
			
		}
	}
	.el-form-item{
		margin-top: 20px;
	}
	.firstcol{
		margin-left: 30px;
	}
	.secondcol{
		width: 380px;
		border: 1px solid black;
		@media screen and(max-width: 500px) {
			
			width: 100%;
			
		}
	}
	#button3{
		border: 1px solid black;
	}
	.reference2{ 
		width: 380px;
		/* border: 1px solid black; */
		@media screen and(max-width: 500px) {
			
			width: 100%;
			
		}
	}
	#submit{
		margin-left: 250px;
		@media screen and(max-width: 500px) {
			
			width: 100%;
			
		}
	}
/* } */
</style>
